<template>
	<view>
		<view class="m-search-box">
			<view class="m-search">
				<!-- <view class="m-search-area m-search-line">
					<text style="max-width: 100rpx;" class="u-line-1">{{vuexCity}}</text>
					<image src="../../static/common/bottom_icon.png" class="m-bottom-icon" mode=""></image>
				</view> -->
				<view class="m-search-date " @click="to_link('/pages/selectDate/selectDate')">
					<view class="">
						<view class="">
							<text>住</text>
							<text class="m-search-font u-m-l-10">{{sliceDate(vuexStartDateObj.dateStr)}}</text>
							<text
								style="margin-left: 4rpx;">{{vuexStartDateObj.recent == '' ? vuexStartDateObj.week : vuexStartDateObj.recent}}</text>
						</view>
						<view class="">
							<text>离</text>
							<text class="m-search-font u-m-l-10">{{sliceDate(vuexEndDateObj.dateStr)}}</text>
							<text
								style="margin-left: 4rpx;">{{vuexEndDateObj.recent == '' ? vuexEndDateObj.week : vuexEndDateObj.recent}}</text>
						</view>
					</view>
					<view class="u-m-l-10" style="font-size: 20rpx;color: #8F6F4C;">
						<text>{{vuexDayCount}}晚</text>
					</view>
				</view>
				<view class="m-search-input">
					<view class="m-search-area" @click="to_link('/pages/addressList/addressList')">
						<text>{{vuexCity}}</text>
					</view>
					<view class="m-search-line">

					</view>
					<view class="m-search-view">
						<image src="/static/index/icon-search.png" mode=""></image>
						<input type="text" placeholder="搜索酒店名、地点" @confirm="searchFun" v-model="keyword">
					</view>
				</view>
				<!-- <view class="m-search-map">
					<image src="/static/index/ditu.png" mode=""></image>
					<text>地图</text>
				</view> -->
			</view>
		</view>
		<view class="m-where-box">
			<view class="m-where-item" :class="{'m-where-active':currentArea.title}" @click="controlPanelView('areaShow',true)">
				<view class="u-line-1">
					<text class="u-m-r-4">{{currentArea.title || '位置区域'}}</text>
				</view>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view>
			<view :class="[{'m-where-active':brandInfo.id},'m-where-item']"  @click="controlPanelView('starShow',true)">
				<view class="u-line-1">
					<text class="u-m-r-4">{{brandInfo.title || '品牌'}}</text>
				</view>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view>
			<view :class="[{'m-where-active':otherInfo.length>0},'m-where-item']"
				@click="controlPanelView('sortShow',true)">
				<view class="u-line-1">
					<text class="u-m-r-4">{{otherInfo.length>0 ? getOtherInfoComputed :'其它筛选'}}</text>
				</view>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view>
			<!-- <view class="m-where-item" @click="whereShow = true">
				<view class="u-line-1">
					<text class="u-m-r-4">筛选</text>
				</view>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view> -->
		</view>
		<!-- <view class="map">
			
		</view> -->
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
				<view class="m-item-img">
					<image :src="item.img" mode="aspectFill">
					</image>
				</view>
				<view class="m-item-con">
					<view class="">
						<text class="m-item-font1 u-line-2">{{item.title}}</text>
					</view>
					<view class="u-m-t-6">
						<text class="m-item-font4 u-m-l-10">{{item.star}}分</text>
						<text class="m-item-font2 u-m-l-20">{{item.comment_num}}条评论</text>
					</view>
					<view class="m-item-font5 u-m-t-10">
						<text class="u-m-r-10">{{item.distance}}</text>
						<!-- <text>{{getTipComputed(item)}}</text> -->
						<view class="m-item-tag__item" v-for="(val,key) in item.landmark" :key="key">
							<image v-if="val.originalPic" :src="val.originalPic" mode=""></image>
							<text>{{val.title}}</text>
						</view>
					</view>
					<view class="u-m-t-12" style="display: flex;flex-wrap: wrap;">
						<text class="m-item-tip1" v-for="(val,key) in item.tags" :key="key">{{val}}</text>
					</view>
					<!-- <view class="u-flex u-p-t-15">
							<view class="m-item-comment u-line-1">
								<text>晚上站在阳台看夜景很不错</text>
							</view>
						</view> -->
					<view class="m-item-con-bottom">
						<view class="">
							<text class="m-item-con-bottom-right">{{item.offer_price}}</text>
							<text class="m-item-line-price">￥{{item.origin_price}}</text>
						</view>
						<view class="m-item-con-bottom-left">
							<text>抢购</text>
						</view>
					</view>
				</view>
			</view>
			<view class="u-p-t-80 m-empty" v-if="list.length == 0 && loadStatus =='noMore'">
				<image src="/static/index/hotel-empty.png" mode=""></image>
				<text>当前区域暂无酒店</text>
				<!-- <u-empty text="当前区域暂无酒店" mode="search"></u-empty> -->
			</view>
			<uni-load-more v-else :status="loadStatus"></uni-load-more>
		</view>

		<!-- 区域 -->
		<!-- <view class="m-poup" v-if="areaShow" @click="controlPanelView('areaShow',false)">
				<view class="m-poup-main">
					<scroll-view scroll-y="true" style="height: 550rpx">
						<view class="m-poup-list">
							<view class="m-poup-item" @click.stop="selectAreaFun(item)"
								:class="{'m-poup-item-active':currentArea.id == item.id}"
								v-for="(item,index) in areaList">
								<text>{{item.name}}</text>
								<view class="m-active-img">
									<image src="../../static/common/duigou.png" mode=""></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view> -->
		<!-- 星级、价格 -->
		<view class="m-poup" v-if="starShow" @click="controlPanelView('starShow',false)">
			<view class="m-poup-main" @click.stop>
				<scroll-view scroll-y="true" style="height: 450rpx">
					<view class="m-poup-star">
						<view class="m-flex m-poup-star-title">
							<text>品牌筛选</text>
						</view>
						<view class="brand-list">
							<view class="brand-item" @click="selectBrandTemFun(item)" :class="{'brand-active': brandInfoTem.id == item.id}" v-for="(item,index) in brandList" :key="index">
								<image :src="item.originalPic" mode="aspectFill"></image>
								<view class="">
									{{item.title}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="m-poup-bottom">
					<view class="m-reset-btn" @click.stop="resetSelectBrandFun">
						<text>重置</text>
					</view>
					<view class="m-submit-btn" @click.stop="selectBrandFun">
						<text>完成</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 排序 -->
		<view class="m-poup" v-if="sortShow" @click="controlPanelView('sortShow',false)">
			<view class="m-poup-main">
				<scroll-view scroll-y="true" style="height: 450rpx">
					<view class="m-poup-star">
						<block v-for="(val,key) in otherList" :key="val.id">
							<view class="m-flex m-poup-star-title">
								<text>{{val.title}}</text>
							</view>
							<view class="u-flex u-flex-wrap u-m-t-20">
								<view
									:class="[{'m-option-item-active': checkSelectedComputed(item) }, 'm-option-item']"
									@click.stop="selectOtherItenFun(item)" v-for="(item,index) in val.channels" :key="index">
									<text>{{item.title}}</text>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
				<view class="m-poup-bottom">
					<view class="m-reset-btn" @click.stop="resetOtherItenFun">
						<text>重置</text>
					</view>
					<view class="m-submit-btn" @click.stop="confirmOtherItenFun">
						<text>完成</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 区域 -->
		<view class="m-poup" v-if="areaShow" @click="controlPanelView('areaShow',false)">
			<view class="m-poup-main" @click.stop v-if="areaList.length > 0">
				<view class="m-poup-main-scroll">
					<scroll-view scroll-y="true" class="m-poup-main-scroll-left">
						<view class="m-select-item" @click.stop="areaIndex = index" :class="{'m-select-item-active':index == areaIndex}" v-for="(item,index) in areaList" :key="index">
							<text>{{item.title}}</text>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="m-poup-main-scroll-right">
						<view class="">
							<view class="m-sort-item" @click.stop="selectAreaTemFun(item)" :class="{'m-sort-item-active':item.id == currentAreaTem.id}"
								v-for="(item,index) in areaList[areaIndex].channels">
								<text>{{item.title}}</text>
							</view>

						</view>
					</scroll-view>
				</view>
				<view class="m-poup-bottom">
					<view class="m-reset-btn" @click="resetAreaFun">
						<text>重置</text>
					</view>
					<view class="m-submit-btn" @click="confirmAreaFun">
						<text>完成</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 日历 -->
		<calendar ref="calendar" mode="2" :is-show="dateShow" theme-color="#fa3534" @callback="getDate" />
	</view>
</template>

<script>
	import {
		sliceDate,
		get_timestamp
	} from "@/common/function/tools.js"
	import {
		getHotelList,
		getAreaList
	} from '@/common/function/api_fun.js'
	export default {
		data() {
			return {
				dateShow: false, //日期插件
				areaShow: false, //区域
				areaIndex: 0,
				starShow: false, //品牌
				sortIndex: 0,
				sortShow: false, //排序
				whereShow: false,
				keyword:'',
				
				otherList:[],
				otherInfoTem:[],
				otherInfo:[],

				areaList: [],
				areaIndex:0,
				currentAreaTem:{}, 
				currentArea: {},
				defaultArea:{id:-999},

				currentPrice: '',
				currentPriceTmp: '',
				starTypeIndex: [],
				starTypeIndexTmp: [],
				starTypeActiveText: '',
				currentSortIndex: 0,
				
				brandList:[],
				brandInfoTem:{},
				
				order_sup:0,
				page: 1,
				pagenum: 10,
				loadStatus: 'loading',
				list: [],
				keyword: '', //搜索关键字

			};
		},
		computed: {
			getAddressComputed() {
				return (address) => {
					return address.slice(2)
				}
			},
			getTipComputed() {
				return (item) => {
					return item.landmark.map(val => val.title).join(' | ')
				}
			},
			getOtherInfoComputed(){
				return this.otherInfo.map(item=>item.title).join(',')
			},
			checkSelectedComputed(){
				return (item)=>{
					let res = this.otherInfoTem.find(val=>{
						return val.id == item.id
					})
					return res ? true  : false
				}
			},
		},
		onReachBottom() {
			if(this.loadStatus == 'more'){
				this.getHotelList()
			}
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title:this.vuexCity || ''
			})
			this.$nextTick(()=>{
				if(this.brandInfo.id){
					this.brandInfoTem = JSON.parse(JSON.stringify(this.brandInfo))
				}
				this.keyword = opt.keyword || ''
				this.getAreaListFun()
				this.getBrandFun()
				this.getOtherListFun()
			})
			
			
			uni.$on('resetListFun', () => {
				setTimeout(()=>{
					uni.setNavigationBarTitle({
						title:this.vuexCity || ''
					})  
				},10)
				this.areaIndex = 0
				this.currentArea = JSON.parse(JSON.stringify(this.defaultArea))
				this.currentAreaTem = {}
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getAreaListFun()
			})
		},
		onUnload() {
			uni.$off('resetListFun')
		},
		methods: {
			sliceDate,
			//获取县区列表
			getAreaListFun() {
				this.$http.getJson('hotal_channel',{parentId:0}).then(res=>{
					if(res.code == 1){
						let list = res.data
						let city = this.vuexCity.replace('市','')
						let item = list.find(item=>item.title.indexOf(city) > -1)
						if(item){
							this.areaList = item.channels
						}
						this.currentArea = {id: item && item.id || -999}
						this.defaultArea = {id:item &&item.id || -999}
						
						this.getHotelList()
						
					}
				})
			},
			resetAreaFun(){
				this.areaIndex = 0
				this.currentArea = JSON.parse(JSON.stringify(this.defaultArea))
				this.currentAreaTem = {}
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			confirmAreaFun(){
				if(this.currentAreaTem.id){
					this.selectAreaFun(JSON.parse(JSON.stringify(this.currentAreaTem)))
				}else{
					this.resetAreaFun()
				}
			},
			selectAreaTemFun(item){
				if (item.id == this.currentAreaTem.id) {
					this.currentAreaTem = {}
				} else {
					this.currentAreaTem = item
				}
				
			},
			selectAreaFun(item) {
				this.currentArea = item
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			
			//获取品牌
			getBrandFun(){
				this.$http.getJson('hotal_brand').then(res=>{
					if(res.code == 1){
						this.brandList = res.data || []
					}
				})
			},
			selectBrandTemFun(item){
				this.brandInfoTem = item
			},
			selectBrandFun(item){
				this.$u.vuex('brandInfo',JSON.parse(JSON.stringify(this.brandInfoTem)))
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			resetSelectBrandFun(){
				this.brandInfoTem = {}
				this.$u.vuex('brandInfo',{})
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			
			//获取其他设置
			getOtherListFun(){
				this.$http.getJson('hotal_search').then(res=>{
					if(res.code == 1){
						this.otherList = res.data  || []
					}
				})
			},
			selectOtherItenFun(item){
				let index = this.otherInfoTem.findIndex(val=>val.id == item.id)
				if(index > -1){
					this.otherInfoTem.splice(index,1)
				}else{
					this.otherInfoTem.push(item)
				}
			},
			resetOtherItenFun(){
				this.otherInfoTem = []
				this.otherInfo = []
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			confirmOtherItenFun(){
				this.otherInfo = JSON.parse(JSON.stringify(this.otherInfoTem))
				this.controlPanelView();
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			
			controlPanelView(attr = '', bool = '') {

				let showField = ['areaShow', 'starShow', 'sortShow', 'whereShow'];
				showField.forEach((item) => {
					if (item === attr) {
						return;
					}
					this[item] = false
				})
				if (attr && (bool === true || bool === false)) {
					this[attr] = bool;
				}

			},
			searchFun() {
				this.page = 1
				this.list = []
				this.getHotelList()
			},
			getHotelList() {
				let {
					lng,
					lat
				} = this.vuexLocation;
				this.loadStatus = 'loading'
				let typeIds = []
				let canyinIds = []
				let sheshiIds = []
				this.otherInfo.forEach(item=>{
					if(item.parentId == 1){
						typeIds.push(item.id)
					}else if(item.parentId == 2){
						canyinIds.push(item.id)
					}else if (item.parentId == 3){
						sheshiIds.push(item.id)
					}
				})
				
				let params = {
					longitude: lng,
					latitude: lat,
					channel_id: this.currentArea.id || '',
					brand_id:this.brandInfo.id || '',
					keyword:this.keyword,
					
					arrive_time: this.vuexStartDateObj.dateStr,
					departure_time: this.vuexEndDateObj.dateStr,
					typeIds:typeIds.join(','),
					canyinIds:canyinIds.join(','),
					sheshiIds:sheshiIds.join(','),
					keyword: this.keyword,
					order_sup: this.order_sup,
					
					city_code: this.vuexCityCode,
					page: this.page,
					pagenum: this.pagenum
				}

				if (this.sortIndex) {
					params.sort = this.sortList[this.sortIndex].value
				}
				if (this.currentPrice) {
					params.price = this.currentPrice
				}
				if (this.starTypeIndex.length) {
					let starTypeValue = [];
					this.starTypeIndex.forEach((item) => {
						starTypeValue.push(this.starTypeList[item].value);
					})
					params.star_type = starTypeValue.join(',')
				}
				if (this.keyword) {
					params.keyword = this.keyword
				}
				this.$http.getJson('hotal_offerList', params).then(res => {
					if (res.code == 1) {
						let data = res.data.list || []
						let len = data.length
						if (len > 0) {
							data.forEach(item=>{
								item.offer_price = Number(item.offer_price)
								item.origin_price = Number(item.origin_price)
							})
							this.list = this.list.concat(data)
						}
						if (len == this.limit) {
							this.loadStatus = 'more'
							this.page += 1
						} else {
							this.loadStatus = 'noMore'
						}
					}else{
						this.$m.msg(res.message)
					}
				})

			},
			//跳转到详情页
			toDetail(id) {
				wx.navigateTo({
					url: '/pages/list/detail?id=' + id + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr+'&order_sup='+this.order_sup,
				})
			},
			getDate(e) {
				console.log(e);
				this.$u.vuex('vuexStartDateObj', e.startStr)
				this.$u.vuex('vuexEndDateObj', e.endStr)
				this.$u.vuex('vuexDayCount', e.dayCount)
				this.dateShow = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.m-search-box {
		display: flex;
		position: fixed;
		justify-content: center;
		align-items: flex-end;
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		top: 0;
		left: 0;
		z-index: 10;

		.m-search {
			display: flex;
			width: 750rpx;
			padding-left: 30rpx;
			padding-right: 5rpx;
			// background: #f4f4f4;
			border-radius: 8rpx;
			// padding: 0 15rpx;
			font-size: 24rpx;
			color: #999;

			.m-search-area {
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				width: 120rpx;
				height: 100%;
				flex-grow: 0;
				flex-shrink: 0;
			}

			.m-search-date {
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				width: 186rpx;
				height: 60rpx;
				flex-grow: 0;
				flex-shrink: 0;
				font-size: 18rpx;
				color: #33302D;
				background: #F7F6F4;
				border-radius: 10rpx 0rpx 0rpx 10rpx;

				.m-search-font {
					color: #33302D;
				}
			}
		}

		.m-search-input {
			display: flex;
			align-items: center;
			width: 432rpx;
			flex: 1;
			height: 60rpx;
			background: #F7F6F4;
			border-radius: 0rpx 10rpx 10rpx 0rpx;
			margin-left: 8rpx;
			margin-right: 20rpx;

			.m-search-area {
				width: 88rpx;
				font-size: 24rpx;
				color: #33302D;
				padding: 0 4rpx;
			}

			.m-search-view {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #33302D;

				image {
					width: 30rpx;
					height: 30rpx;
				}
				input{
					flex: 1;
					padding: 0 10rpx;
				}
			}
		}

		.m-search-map {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			line-height: 24rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.m-where-box {
		display: flex;
		width: 750rpx;
		height: 80rpx;
		background: #fff;
		position: fixed;
		z-index: 10;
		left: 0;
		top: 100rpx;

		.m-where-item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx;
			text-align: center;
			line-height: 80rpx;
			flex-grow: 0;
			flex-shrink: 0;
			height: 100%;
			width: 33.333333333%;
			// flex: 1;
			font-size: 24rpx;
			color: #33302D;
		}

		.m-where-active {
			color: #D3A358;
		}
	}

	.m-search-line {
		width: 1rpx;
		height: 30rpx;
		background: #D3CEC9;
	}
	
	.map{
		width: 750rpx;
		height: calc(100vh - 180rpx);
		margin-top: 180rpx;
		map{
			width: 100%;
			height: 100%;
		}
	}

	.m-list {
		display: flex;
		flex-direction: column;
		margin-top: 210rpx;

		.m-item {
			display: flex;
			padding: 0 25rpx 25rpx 25rpx;

			.m-item-font1 {
				font-size: 30rpx;
				color: #33302D;
				font-weight: 800;
				line-height: 42rpx;
			}

			.m-item-font2 {
				font-size: 24rpx;
				color: #717886;
			}

			.m-item-font3 {
				font-size: 34rpx;
				color: #fa3534;
				font-weight: 800;
			}

			.m-item-font4 {
				font-size: 36rpx;
				color: #D3A358;
				font-weight: 500;
			}

			.m-item-font5 {
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;
				color: #33302D;
				line-height: 33rpx;
				.m-item-tag__item{
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					image{
						flex-shrink: 0;
						width: 33rpx;
						height: 33rpx;
						margin-right: 4rpx;
					}
				}
			}

			.m-item-tip1 {
				font-size: 18rpx;
				color: #8F6F4C;
				border: 1rpx solid #D3CEC9;
				padding: 4rpx;
				margin-right: 10rpx;
				margin-bottom: 5rpx;
			}

			.m-item-tip2 {
				font-size: 18rpx;
				color: #ff9900;
				border: 1rpx solid #ff9900;
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.m-item-tip3 {
				font-size: 18rpx;
				color: #19be6b;
				border: 1rpx solid #19be6b;
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.m-item-tip4 {
				font-size: 18rpx;
				color: #2979ff;
				border: 1rpx solid #2979ff;
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.m-item-comment {
				max-width: 450rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #F6F7FB;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #33302D;
			}

			.m-item-img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				height: 346rpx;

				image {
					width: 100%;
					border-radius: 10rpx;
				}
			}

			.m-item-con {
				position: relative;
				width: 460rpx;
				margin-left: 20rpx;

				.m-item-con-bottom {
					display: flex;
					justify-content: space-between;
					// position: absolute;
					// bottom: 0;
					margin-top: 20rpx;
					width: 460rpx;
					
					.m-item-con-bottom-left{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 48rpx;
						background: linear-gradient( 90deg, #EFC27D 0%, #FFA960 100%);
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						font-size: 28rpx;
						color: #fff;
					}

					.m-item-con-bottom-right {
						font-size: 40rpx;
						color: #DE2C38;
						font-weight: 400;

						&::before {
							content: '￥';
							color: #e44c4c;
							font-size: 24rpx;
							font-weight: 400;
						}

						&::after {
							content: '起';
							font-size: 24rpx;
							font-weight: 400;
							color: #999;
						}
					}
					.m-item-line-price{
						font-size: 24rpx;
						color: #76706B;
						text-decoration: line-through;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.m-bottom-icon {
		width: 16rpx;
		height: 16rpx;
		flex-grow: 0;
		flex-shrink: 0;
		margin-left: 4rpx;
	}





	.m-poup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba($color: #000000, $alpha: 0.5);
		z-index: 8;

		.m-poup-main {
			max-height: 552rpx;
			width: 750rpx;
			background: #fff;
			margin-top: 178rpx;
			border-top: 1rpx solid #eeeeee;

			.m-poup-list {
				display: flex;
				flex-direction: column;
				margin-left: 24rpx;

				.m-poup-item {
					display: flex;
					position: relative;
					align-items: center;
					height: 90rpx;
					border-bottom: 1rpx solid #EEEEEE;
				}

				.m-active-img {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					display: none;
					top: 50%;
					transform: translateY(-16rpx);
					right: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.m-poup-item-active {
					color: #fa3534;

					.m-active-img {
						display: block;
					}
				}
			}
		}
	}

	.m-poup-bottom {
		display: flex;
		align-items: center;
		background: #fff;
		width: 750rpx;
		height: 120rpx;
		border-top: 1rpx solid #EEEEEE;

		.m-reset-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			height: 100%;
			text-align: center;
			line-height: 120rpx;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}

		.m-submit-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 540rpx;
			height: 88rpx;
			background: #D3A358;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-right:24rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}


	.m-option-item {
		display: flex;
		width: 220rpx;
		height: 80rpx;
		// padding: 10rpx 20rpx;
		background: #f4f4f4;
		border-radius: 4rpx;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #222;
		margin: 0 15rpx 15rpx 0;
	}

	.m-option-item-active {
		color: #D3A358;
		background: rgba($color: #D3A358, $alpha: 0.15);
	}

	.m-price-font1 {
		font-size: 28rpx;
		color: #fa3534;
	}

	.m-poup-star {
		display: flex;
		flex-direction: column;
		padding: 24rpx;

		.m-poup-star-title {
			font-size: 28rpx;
			color: #33302D;
		}
		.brand-list{
			display: flex;
			flex-wrap: wrap;
			padding-top: 20rpx;
			.brand-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				// height: 128rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 1rpx solid #E6E2DE;
				font-size: 26rpx;
				color: #76706B;
				text-align: center;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 0;
				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 12rpx;
				}
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			.brand-active{
				border-color: #D3A358;
			}
		}
	}


	.m-poup-main-scroll {
		display: flex;
		height: 450rpx;

		.m-poup-main-scroll-left {
			width: 200rpx;
			height: 450rpx;
			background: #f4f4f4;
		}

		.m-poup-main-scroll-right {
			width: 550rpx;
			height: 450rpx;
		}
	}


	.m-select-item {
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #666;
	}

	.m-select-item-active {
		background: #fff;
		color: #D3A358;
	}

	.m-sort-item {
		height: 60rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 80rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		margin-left:30rpx;
	}

	.m-sort-item-active {
		color: #D3A358;
	}
	
	.m-empty{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #ADAAA5;
		text-align: center;
		padding-top: 200rpx;
		image{
			width: 320rpx;
			height: 260rpx;
			margin-bottom: 15rpx;
		}
	}
</style>